<template>
	<view>
		<view>
			<view id="poster" style="display: flex;flex-direction: column;">
				<image :src="'../../static/images/'+item[index]+'.png'" mode="widthFix" @load="onImageLoad(0)" />
				<view style="position: relative;">
					<image style="vertical-align: bottom" :src="'../../static/images/'+item[index]+'_.png'"
						mode="widthFix" @load="onImageLoad(1)" />
					<image style="position: absolute;width: 250rpx;height: 250rpx; left: 250rpx" :src="qrImg"
						@load="onImageLoad(2)" />
				</view>
			</view>
			<image style="position: absolute; top: 0;" :src="generateImageUrl" mode="widthFix" /> 
		</view>
		<view>
			<uni-section :title="tips">
				<template v-slot:right>
					<text style="color: red;" @click="change()">
						换张宣传图
					</text>
				</template>
			</uni-section>

			<view id="tglj">
				<view>
					<uni-title type="h3" title="推广链接(可与推广宣传图搭配使用)"></uni-title>
					<text>将链接复制到浏览器中打开 </text>
					<text id="t2">{{cxUrl}}</text>
				</view>
				<view style="display: flex;justify-content: center;">
					<button type="primary" style="width: 48%;" @click="copyText">复制分享链接</button>
					<button type="primary" style="width: 48%;" @click="saveImg">保存宣传图</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import QRCode from '@/node_modules/qrcode'
	import html2canvas from 'html2canvas'

	export default {
		data() {
			return {
				generateImageUrl: '',
				loadArr: [false, false, false],
				index: 0,
				item: null,
				qrImg: null,
				cxUrl: null,
				name: '',
				tips: '长按图片保存，分享给用户查询得佣金',

				IMGS: [
					['DL1', 'DL2'], 	// 代理海报		
					['XYZY2', 'XYZY1'], // 信用报告-专业版 
					['XYPT1'], 			// 信用报告-普通版
					['NSXX1'], 			// 企业纳税信息
					['HL1'], 			// 婚恋信息
					['SFSS1', 'SFSS2'], // 个人司法诉讼
					['GRBDC1'], 		// 个人不动产
				],

			}
		},
		onLoad(option) {
			const index = option.id ? Number.parseInt(option.id) : 0
			this.item = index == 0 && this.$auth.hasRole("general") ? ['DL3'] : this.IMGS[index]	
			this.name = index != 0 ? '邀请查询' : '邀请代理'
			if (index == 0) {
				if(this.$auth.hasRole("general")){
					this.tips = '长按图片保存'
				}else{
					this.tips = '长按图片保存，注册发展代理赚提成'
				}
			}
			uni.setNavigationBarTitle({
				title: this.name
			})
			let naviPath = ['register', 'professional', 'ordinary', 'company', 'marriage', 'judicial', 'immovables'][index]
			this.cxUrl = window.location.origin + '/pages/' + naviPath + '?ui=' + this.$store.state.user.userid
			QRCode.toDataURL(this.cxUrl, (err, qrCodeData) => {
				if (err) console.error(err)
				this.qrImg = qrCodeData
			})
		},
		methods: {
			onImageLoad(index) {
				this.loadArr[index] = true
				if (this.loadArr.some(item => item === false)) {
					return
				} else {
					this.generateImg()
				}
			},
			generateImg() {
				this.$modal.loading('获取中...')
				let that = this
				setTimeout(() => {
					html2canvas(document.querySelector("#poster")).then(function(canvas) {
						// console.log(canvas, "canvas")
						const imgData = canvas.toDataURL("image/png")
						that.generateImageUrl = imgData
					})
					that.$modal.closeLoading()
				}, 50)
			},
			change() {
				this.index = this.item[++this.index] == undefined ? 0 : this.index
				if (this.item.length == 1) {
					this.$modal.msg('目前仅一张供选择')
				}
			},
			saveImg() {
				if (!this.generateImageUrl) {
					uni.showToast({
						title: '图片尚未生成',
						icon: 'none'
					})
					return
				}
				var link = document.createElement("a");
				link.href = this.generateImageUrl
				link.download = this.name + (this.index + 1) + '.png'
				link.click()
			},
			copyText() {
				this.$copyText(this.cxUrl).then((e) => {
					this.$modal.msgSuccess('已复制快分享吧！')
				}, (e) => {
					alert('Can not copy')
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: linear-gradient(180deg, #c4d6ff, #f7f8fa);
		min-height: 100%;
	}

	image {
		width: 100%;
	}

	#tglj {
		margin: 10rpx;
		padding: 10rpx;
		border-radius: 16rpx;
		background-color: #fff;

		#t2 {
			line-height: 80rpx;
			font-weight: bold;
		}
	}
</style>